<script>
import { mapState } from 'vuex'
import { paymentMethodArray } from '@/constants'

export default {
  name: 'propForm',
  data() {
    return {
      /* 表单数据对象 */
      formData: {
        enterpriseId: '',
        buildingId: '',
        startTime: '',
        endTime: '',
        paymentAmount: '',
        paymentMethod: ''
      },
      time: [],
      paymentMethodArray
    }
  },
  methods: {
    /* 获取楼宇列表的回调函数 */
    async fetchBuildingList() {
      try {
        await this.$store.dispatch('propetyStore/fetchBuildingList')
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 获取租户列表的回调函数 */
    async fetchEnterpriseList() {
      try {
        await this.$store.dispatch('propetyStore/fetchEnterpriseList')
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 日期选择框的change事件 */
    changeDate([startTime, endTime]) {
      this.formData.startTime = startTime
      this.formData.endTime = endTime
    },
    /* 点击确定按钮的回调函数 */
    async handleSubmit() {
      try {
        const addResult = await this.$store.dispatch('propetyStore/addPropertyfee', this.formData)
        this.$message.success(addResult)
        this.$emit('success')
      } catch (error) {
        this.$message.error(error.message)
      }
    }
  },
  computed: {
    ...mapState('propetyStore', ['buildingList', 'enterpriseList'])
  },
  emits: ['success'],
  mounted() {
    this.fetchBuildingList()
    this.fetchEnterpriseList()
  }
}
</script>

<template>
  <el-form label-width="100px" :model="formData">
    <el-form-item label="选择租户">
      <el-select size="small" v-model="formData.enterpriseId" placeholder="请选择租户">
        <el-option v-for="(item) in enterpriseList" :value="item.id" :label="item.name" :key="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="租赁楼宇">
      <el-select size="small" v-model="formData.buildingId" placeholder="请选择租赁楼宇">
        <el-option v-for="(item) in buildingList" :value="item.id" :label="item.name" :key="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="缴费周期">
      <el-date-picker v-model="time" size="small" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="changeDate"></el-date-picker>
    </el-form-item>
    <el-form-item label="支付金额">
      <el-input size="small" placeholder="请输入支付金额" v-model="formData.paymentAmount"></el-input>
    </el-form-item>
    <el-form-item label="支付方式">
      <el-select size="small" v-model="formData.paymentMethod" placeholder="请选择支付方式">
        <el-option v-for="(item) in paymentMethodArray" :value="item.value" :label="item.label" :key="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button size="small">取消</el-button>
      <el-button type="primary" size="small" @click="handleSubmit">确定</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">
.el-form {
  .el-select {
    width: 100%;
  }

  .el-date-editor {
    width: 100%;
  }
}
</style>
